<template>
    <transition name="el-fade-in">
      <div class="page-up" @click="scrollToTop">
        <i class="el-icon-ali-up-arrow"></i>
        <div>top</div>
      </div>
    </transition>
</template>

<script>
    export default {
        name: "app-to-top",
        data(){
            return{
                toTopShow:true,
                scrollTop: 0
            }
        },
        methods:{
            handleScroll() {
    　　　　　　　　/* 获取回到顶部的位置元素 .content-container-top */
                let dom =document.getElementsByClassName('el-main')[0];
                this.scrollTop = dom.scrollTop;
            },
            scrollToTop() {
                let timer = null;
                let _this = this;
                cancelAnimationFrame(timer);
                timer = requestAnimationFrame(function fn() {
                    if (_this.scrollTop > 5000) {
                        _this.scrollTop -= 1000;
                        document.getElementsByClassName("el-main")[0].scrollTop =
                            _this.scrollTop;
                        timer = requestAnimationFrame(fn);
                    } else if (_this.scrollTop > 1000 && _this.scrollTop <= 5000) {
                        _this.scrollTop -= 500;
                        document.getElementsByClassName("el-main")[0].scrollTop =
                            _this.scrollTop;
                        timer = requestAnimationFrame(fn);
                    } else if (_this.scrollTop > 200 && _this.scrollTop <= 1000) {
                        _this.scrollTop -= 100;
                        document.getElementsByClassName("el-main")[0].scrollTop =
                            _this.scrollTop;
                        timer = requestAnimationFrame(fn);
                    } else if (_this.scrollTop > 50 && _this.scrollTop <= 200) {
                        _this.scrollTop -= 10;
                        document.getElementsByClassName("el-main")[0].scrollTop =
                            _this.scrollTop;
                        timer = requestAnimationFrame(fn);
                    } else if (_this.scrollTop > 0 && _this.scrollTop <= 50) {
                        _this.scrollTop -= 5;
                        document.getElementsByClassName("el-main")[0].scrollTop =
                            _this.scrollTop;
                        timer = requestAnimationFrame(fn);
                    } else {
                        cancelAnimationFrame(timer);
                        // _this.toTopShow = false;
                    }
                });
            }
        },
        mounted() {
            this.$nextTick(function () {
                window.addEventListener('scroll', this.handleScroll,true);// 取消事件冒泡，防止绑定失败
            });
        },
        destroyed() {
            window.removeEventListener('scroll', this.handleScroll,true);// 取消事件冒泡
        }
    }
</script>

<style scoped>

</style>
